<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css" >
    <link rel="stylesheet" href="css/font-awesome.min.css" >
    

    <title>Hello, world!</title>

    <style>
      html{
        height:100%;
      }
      body{
        height:100%;
      }

      #app{
        width:100%;
        height:100%;

        min-width: 900px;
        min-height:500px;

        overflow: auto;/*超出范围自动产生滚动条*/
        
        display: flex;/* 定义本元素（#app）是一个flex（柔性布局/灵活布局）盒子  */
        flex-direction: row;/*内部元素按行排列*/

      }

      .nav{
        height:100%;

        overflow: hidden;/*超出范围隐藏*/
        transition: width 0.5s;
        
        box-shadow: rgba(0, 0, 0, 0.1) 1px 0px 1px;

        display:flex;
        flex-direction: column;
      }

      .main{
        height:100%;
        flex:auto;/*本元素做为flex容器中的元素，以自动扩展占位*/

        display: flex;
        flex-direction: column;
        
      }

      .title{
        width:100%;
        height:50px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;

        position: relative;/*这样设置，将做为子元素的定位基准*/
      }

      .curruser{
        position:absolute;/*相对于父元素定位*/
        right:20px;
        bottom: 5px;

        display:flex;
        flex-direction: row;/*主轴为水平方向*/
        align-items: center;/*交叉轴居中对齐*/

      }

      .content{
        padding:5px;
        width:100%;
        flex:auto;
      }

      .bottom{
        width:100%;
        height:30px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 1px;
      }

      .main-menu:hover{/*鼠标悬浮时的样式*/
        color:white;
        background-color: slateblue;
      }

    </style>


  </head>
  <body>
 

    <div id="app">
      <div class="nav" :style="{width:navWidth+'px'}"  >
        <div style="box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px;"  >
          <img src="img/logo.png" style="height:50px;" />
        </div>

        <!-- 导航菜单 -->
      <div class="accordion" id="accordionExample" style="padding-left:10px;padding-right:10px;font-size:14px;">
        <div style="margin-top:10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px 1px;border-radius: 10px; ">
          <div class="main-menu" data-toggle="collapse" data-target="#two" id="headingOne" style="border-radius: 10px;cursor:pointer;padding:5px 0px 5px 15px;" >图书管理
          </div>
          <div class="list-group collapse" id="two"  data-parent="#accordionExample">
              <a href="bookcontrol.html" target="contentFrame" class="list-group-item list-group-item-action" style="border:none;" >审核书籍
              </a>
              <a href="search_detele.html" target="contentFrame" class="list-group-item list-group-item-action" style="border:none;" >检索和删除书籍
              </a>
          </div>
        </div>
        <div style="margin-top:10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px 1px;border-radius: 10px; ">
          <div class="main-menu" data-toggle="collapse" data-target="#three" id="headingOne" style="border-radius: 10px;cursor:pointer;padding:5px 0px 5px 15px;" >用户管理
          </div>
          <div class="list-group collapse" id="three"  data-parent="#accordionExample">
              <a href="usercontrol.html" target="contentFrame" class="list-group-item list-group-item-action" style="border:none;" >失信用户管理
              </a>   
          </div>
        </div>
      </div>
    </div>

    <div class="main" >
      <div class="title">
        <i @click="switchNavWidth" class="fa fa-bars fa-2x" style="color:#CCCCCC;margin:12px 0px 0px 10px;cursor: pointer;"></i>
        <div class="curruser">
          <div class="dropdown" style="margin-left:20px;" >
            <a class="dropdown-item" href="#"  @click.prevent="exit" >退出系统
            </a>
          </div>
        </div>
      </div>
      <div class="content">
        <iframe name="contentFrame" style="width:100%;height:100%;border:none;"></iframe>
      </div>
    </div>

    <!-- 新增窗口 -->
    <div id="add-win" style="display:none;padding:15px;">=
      <form>
          <div class="form-group">
              <label>书名：</label>
              <input type="text" class="form-control" v-model="addData.b_name" >
          </div>
          <div class="form-group">
              <label>作者：</label>
              <input type="text" class="form-control" v-model="addData.author" >
          </div>
          <div class="form-group">
              <label>出版社：</label>
              <input type="text" class="form-control" v-model="addData.press" >
          </div>
          <div class="form-group">
              <label>借出用户ID：</label>
              <input type="text" class="form-control" v-model="addData.lender" >
          </div>
          <button type="button" class="btn btn-primary"  @click="add" >提交</button>
      </form>
    </div>

    
    <script src="js/jquery-3.6.0.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/my-axios.js"></script>
    <script src="layer/layer.js"></script>

    <script>


       
      //定义vue应用配置
      const app = {
          //data函数专门用来定义数据
          data(){
              return {
                addData:{//新增数据
                  b_id:'',
                  b_name:'',
                  author:'',
                  press:'',
                  lender:'',
                  cover:'',
                  status:0
              },
              addIdx:null,//新增窗口标识
                
                navWidth:180,
                
              };
          },

          //定义方法
          methods:{
            //切换导航栏的宽度
            switchNavWidth(){
              this.navWidth = this.navWidth==180?0:180;
            },

            getCurrentUser(){
              myAxios.get('/current-user').then(res=>{
                this.currentUser=res.data.data;
                console.log("当前用户：",this.currentUser);
              });
            },
            //新增弹窗
            openAdd() {
              this.addIdx = layer.open({
                  type: 1,
                  title: '新增图书信息',
                  area: ['800px', '600px'],
                  content: $('#add-win')
              });
          },
          //执行新增
          add(){
              const idx = layer.load();
              this.addData.b_id=Date.parse(new Date());
              myAxios.post('/admin/addbook',this.addData).then(res=>{
                  layer.close(idx);
                  if(res.data.success){
                      this.getbookList();
                      layer.close(this.addIdx);
                      layer.msg('新增图书成功！',{icon:1});
                  }
              }).catch(err=>{
                  layer.close(idx);
                  layer.msg('新增图书失败！',{icon:2});
              });
          },
            

            //退出系统
            exit(){
              myAxios.post('/exit').then(res=>{
                if(res.data.success){
                  layer.msg('您已成功退出系统！请重新登录。',{icon:1},()=>{
                    window.location.href="login.html"
                  });
                }else{
                  layer.msg('退出失败！',{icon:2});
                }
              }).catch(err=>{
                layer.msg('系统错误！请与管理员联系。',{icon:2});
              });
            }

          },

          //定义回调方法：mounted 该方法在页面渲染完成立即执行
          mounted(){
           
          }
      };

      Vue.createApp(app).mount('#app')

  </script>
    

   
  </body>
</html>